<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id='ng-app' ng-app="angular-google-maps-example">
<head>
    <meta charset="UTF-8">
    <title>angular-google-maps example page</title>
    <!-- See https://rawgithub.com/ as it returns the correct mimetypes that are requested from github.-->
    <!-- make IE Happy , http://docs.angularjs.org/guide/ie -->
    <!--[if lte IE 9]>
    <script>
	    window.html5 = {
            'elements': 'marker window windows markers layer polyline marker-label ng-controller ng-repeat ng-init ng-model ng-hide ng-show'
        };
	</script>

    <script src="https://rawgithub.com/bestiejs/json3/v3.2.5a/lib/json3.min.js"></script>
    <script src="https://rawgithub.com/kriskowal/es5-shim/v2.1.0/es5-shim.min.js"></script>
    <script src="https://rawgithub.com/jwmcpeak/EventShim/master/eventShim.js"></script>
    <script src="https://rawgithub.com/aFarkas/html5shiv/3.7.0/src/html5shiv.js"></script>
    <![endif]-->

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,600,300,700'
          rel='stylesheet' type='text/css'>
    <link href="assets/stylesheets/example.css" rel="stylesheet" type="text/css">
</head>

<body ng-controller="DebugController" ng-cloak>
<!--	You can use either a div having class 'google-map' or the '<ui-gmap-google-map>' element; in
	the latter case, uncomment the style above to make sure the custom elements gets block display	-->
<div class="page-title" ng-cloak>
    <h2 ng-cloak>angular-google-maps example {{version}}</h2>
</div>
<div class="container">
    <div class="row">
        <button class="col-md-2 btn btn-success" ng-click="map.refresh()">Refresh Map</button>
        <div class="col-md-4"></div>
        <button class="col-md-2 btn btn-success" ng-click="map2.refresh()">Refresh Map2</button>
    </div>
    <div class="row">
        <ui-gmap-google-map class="col-md-6"
                    center="map.center"
                    zoom="map.zoom"
                    options="map.options"
                    dragging="map.dragging"
                    control="map.control"
                    ng-cloak
                >
            <ui-gmap-marker coords="map.marker2" idkey="map.marker2.id" >
                <ui-gmap-window isIconVisibleOnClick="true">
                    <p ng-cloak>Marker , MAP 1 Clicked on me2!</p>
                </ui-gmap-window>
            </ui-gmap-marker>
        </ui-gmap-google-map>

        <!-- ng-if to remove and replace from dom completley see issue #76 thanks facultymatt-->
        <ui-gmap-google-map
                ng-if="map2.showMap"
                class="col-md-6"
                center="map2.center"
                zoom="map2.zoom"
                dragging="map2.dragging"
                control="map2.control"
                ng-cloak>
            <ui-gmap-marker coords="map2.marker2" idkey="map2.marker2.id">
                <ui-gmap-window isIconVisibleOnClick="true">
                    <p ng-cloak>Marker 2Clicked on me2!</p>
                </ui-gmap-window>
            </ui-gmap-marker>
            <ui-gmap-marker ng-repeat="m in map2.markers3" icon="m.icon" coords="m.coords" click="map2.onMarkerClick(m)" idkey="m.id">
                <ui-gmap-window show="m.show" ng-cloak>
                    <p>
                        Latitude: {{m.coords.latitude}}<br/>
                        Longitude: {{m.coords.longitude}}<br/>
                        Last signal: <strong>{{m.lastSignal}}</strong>
                    </p>
                </ui-gmap-window>
            </ui-gmap-marker>
        </ui-gmap-google-map>
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=weather,visualization&sensor=false&language=en&v=3.13"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js" type="text/javascript"></script>
<script src="../dist/angular-google-maps.js"></script>
<script src="assets/scripts/mocks/heat-layer.js"></script>
<script src="assets/scripts/controllers/two-maps.js"></script>
<script src="assets/scripts/controllers/templates/info.js"></script>
<script src="http://localhost:35729/livereload.js"></script>
</body>

</html>
